<template>
	<view>
		<view class="header" @click="navTo('/pages/search/search')">
			<view class="search">
				<text class="mix-icon icon-sousuo"></text>
				<text>输入小区或商圈名开始搜索！</text>
			</view>
		</view>
		<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in swiper">
				<view class="swiper-item" >
					<image class="img" :src="item.followDress" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 导航 -->
		<view class="lists">
			<view class="list" v-for="(item,index) in list" :key='index' @click="router(index)">
				<view class="image">
					<image class="img" src="../../static/icon/icon2.png" mode=""></image>
				</view>
				<view class="">
					{{item}}
				</view>
			</view>
		</view>
		
		<!--  -->
		<view class="title">
			为你推荐租房
		</view>
		<view class="box">
			<house-list :recommend='recommend' v-if="recommend"></house-list>
		</view>
		<view class="title">
			为你推荐新房
		</view>
		<view class="box">
			<house-list1 :recommenda='recommenda' v-if="recommenda"></house-list1>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					'政策房','二手房','新房','租房','房东挂牌',
				],
				swiper:'',//轮播图
				recommend:'',//推荐租房屋
				recommenda:'',//推荐新房屋
			};
		},
		created() {
			console.log(this.recommend)
		},
		onLoad(){
			//推荐租房房屋
			this.$u.get('/house/houseDto',{
				recommend:1,
				classification:4
			}).then(res =>{
				console.log(res)
				console.log(this.recommend = res)
				console.log(this.recommend)
			}).catch((e) => {})
			//推荐新房房屋
			this.$u.get('/house/houseDto',{
				recommend:1,
				classification:2
			}).then(res =>{
				console.log(res.data.records)
				console.log(this.recommenda = res)
				console.log(this.recommenda)
			}).catch((e) => {})
		},
		onReady() {
			//轮播图
			this.$u.get('/follow/folllowall?typeid='+2).then(res =>{
				console.log(this.swiper = res.data)
			}).catch((e) => {})
			
		},
		methods:{
			router(id) {
				let url = ''
				switch (id) {
					case 0:
						console.log('政策房');
						url = '/Estate/zhengCe/zhengCe'
						break;
					case 1:
						url = '/Estate/houseData/ershou'
						console.log('二手房');
						break;
					case 2:
						console.log('新房');
						// url = '/Estate/Housing/Housing'//房子信息
						// url = '/Estate/Renting/Renting'//房子信息
						// url = '/Estate/SellHousing/SellHousing'//售房进度条
						// url = '/Estate/Service/Service'//聊天界面
						// url = '/Estate/viewImg/viewImg'//实拍图
						url = '/Estate/houseData/xinfang'
						break;
					case 3:
						console.log('租房');
						url = '/Estate/houseData/houseData'
						break;
					case 4:
						console.log('房东挂牌');
						url = '/Estate/Listing/Listing'
						break;
					default:
						break;
				}
				this.$u.route({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss">
	.header {
		width: 80%;
		display: flex;
		height: 90rpx;
		margin: auto;
		align-items: center;

		.icon {
			width: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon-saoma {
				font-size: 40rpx
			}
		}

		.search {
			background: #eee;
			height: 66rpx;
			border-radius: 33rpx;
			flex: 1;
			text-align: center;
			line-height: 66rpx;
			color: #999;
		}
	}

	.banner {
		width: 85%;
		height: 300rpx;
		margin: auto;
		border-radius: 15rpx;

		.swiper-item {
			width: 100%;
			height: 300rpx;
			border-radius: 15rpx;

			image {
				border-radius: 15rpx;
			}
		}
	}

	.lists {
		width: 95%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;

		.list {
			margin: auto;
			text-align: center;

			.image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}

	.title {
		width: 90%;
		margin: 30rpx auto;
		font-size: 30rpx;
		font-weight: 550;
	}
	.box{
		width: 85%;
		margin: 30rpx auto;
	}
</style>
